import React, { useState } from "react";

export default function Todoitem(props) {
	let { item, updateTodo, removeTodo, index } = props;

	//创建状态
	let [id, setId] = useState(null);

	//显示隐藏 删除按钮
	let changebtn = (i) => {
		return () => {
			i >= 0 ? setId(i) : setId(null);
			//    setId(i);
		};
	};

	//删除某个todo
	let del = (id) => {
		return () => {
			removeTodo(id);
		};
	};

	//修改某个完成
	let update = (id) => {
		return (e) => {
			updateTodo(id, e.target.checked);
		};
	};
	return (
		<li
			onMouseOver={changebtn(index)}
			onMouseOut={changebtn(null)}
			key={item.id}
		>
			<label>
				<input checked={item.done} type="checkbox" onChange={update(item.id)} />

				<span>{item.title}</span>
			</label>
			{/* <button className={id === index ? "btn btn-danger block" : "btn btn-danger none"}>删除</button> */}
			<button
				className="btn btn-danger"
				style={id === index ? { display: "block" } : { display: "none" }}
				onClick={del(item.id)}
			>
				删除
			</button>
		</li>
	);
}
